<template>
	<view class="">
		<view class="position-relative" style="height: 6550rpx;">
			<view class="w-100 position-absolute" style="z-index: 10;margin-bottom: 400rpx;">
				<image :src="Domain_ICON+'/htyp.webp'" mode="widthFix" class="img"></image>
				<view class="position-absolute w-100"
					style="bottom: 0;height: 180rpx;background-color: rgba(15,64,153);">
				</view>
			</view>
			<!-- 商品部分 -->
			<view class="position-absolute " style="z-index: 20;top: 0;width: 91%;margin-left:33rpx">
				<!-- 十个导航跳转 -->
				<view class="w-100 position-absolute flex flex-wrap" style="height: 320rpx;top: 375rpx;">
					<view @click="shop_dhClick(item.name,item.ShopColumn_Id)" class=""
						v-for="(item,index) in shopHtyp_dh" :key="index"
						style="width:19%;height: 155rpx;margin-right: 5rpx;">
					</view>
				</view>
				<!-- 优品推荐商品 -->
				<view class="w-100 position-absolute flex flex-column" style="top:850rpx;">
					<view @click="productClick(item)" class="w-100 mb-3 bg-danger" v-for="(item,index) in htupList.slice(0,3)"
						:key="index" style="height: 255rpx;">
						
					</view>
				</view>
				<!-- 新品尝鲜 -->
				<view class="w-100 position-absolute px-2 flex flex-wrap justify-between"
					style="top:1860rpx;box-sizing: border-box;">
					<view class="mb-4" @click="productClick(item)" v-for="(item,index) in htupList.slice(3,8)"
						:key="index" style="width:48.5%;height: 530rpx;">

					</view>
					<view class="w-100 mt-2" style=";height: 440rpx;">

					</view>
				</view>
				<!-- 爆品热卖 -->
				<view class="">
					<view class="w-100 position-absolute px-2 flex flex-wrap flex-wrap"
						style="top:3645rpx;box-sizing: border-box;">
						<view class="w-100 mt-2" @click="productClick(item)"
							v-for="(item,index) in htupList.slice(8,12)" :key="index" style=";height: 435rpx;">
						</view>
					</view>
				</view>
			</view>
			<!-- 储值卡 -->
			<!-- <view class="czk w-100 position-absolute">
				<buyCard></buyCard>
			</view> -->
			<view class="w-100 position-absolute" style="z-index: 50; bottom: 0;">
				<botSponsor bgHeight="280rpx"></botSponsor>
			</view>
		</view>


		<view class="position-fixed fixed-bottom" style="height: 110rpx;z-index: 100;">
			<tabsBottom></tabsBottom>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabsBottom from "@/components/tabs/tabs-bottom.vue"
	import botSponsor from "@/components/botsponsor/sponsor.vue"
	// import tenIcons from "@/components/tenIcons/tenIcons.vue"
	import {
		getJsonInquiry
	} from '@/api/global.js'
	import {
		getWX2GoodsIdAction
	} from "@/api/index.js"
	import buyCard from "@/components/buyCard.vue"
	export default {
		components: {
			tabsBottom,
			botSponsor,
			buyCard,
			// tenIcons
		},
		data() {
			return {
				htupList: [],
				shopHtyp_dh: [],
				Domain_ICON: app.globalData.Domain_ICON,
			}
		},
		onLoad(option) { //gxyhtyoupin
			if (option.hasOwnProperty('ShopColumn_Id')) {
				this.getWX2GoodsIdAction(option.ShopColumn_Id)
			}
			// this.getData('hmgx/gxyhtyoupin.json')
			this.getData1('hmgx/shopHtyp.json')

		},
		methods: {
			async getWX2GoodsIdAction(ShopColumn_Id) {
				const res = await getWX2GoodsIdAction({
					ShopColumn_Id,
					Open_ID: app.globalData.Open_ID,
					page: 1,
					limit: 20
				})
				if (res.Status == "success") {
					this.htupList = res.tableData;
					this.htupList.reverse();
				}
				//console.log(this.htupList, '商品');
			},
			// async getData(File) {
			// 	const res = await getJsonInquiry({
			// 		File
			// 	})
			// 	if (res.Status == 'success') {
			// 		this.htupList = JSON.parse(res.Data)
			// 	}
			// 	//console.log(this.htupList)
			// },
			async getData1(File) {
				const res = await getJsonInquiry({
					File
				})
				//console.log(res);
				this.shopHtyp_dh = JSON.parse(res.Data)
			},
			shop_dhClick(name, ShopColumn_Id) {
				uni.navigateTo({
					url: "/pages/index/gongyou?name='htyp'" + '&item_name=' + name + '&ShopColumn_Id=' +
						ShopColumn_Id + '&json_url=' + 'hmgx/shopHtyp_item.json'
				})
			},
			// 点击商品,进入商品详情页
			productClick(item) {
				uni.navigateTo({
					url: "/pages/index/productDetails?name=" + item.Article_Name + "&Article_SerialNumber=" +
						item.Article_SerialNumber + "&Sales_Unit_Price_SerialNumber=" + item.Sales_Unit_Price_SerialNumber 
						+"&Store_SerialNumber=" + item.Store_SerialNumber +'&ShopColumn_Id=' + item.ShopColumn_Id
				})
			},
		}

	}
</script>

<style scoped>
	.czk {
		z-index: 50;
		top: 5652rpx;
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		padding-left: 5rpx;
	}
</style>